import * as THREE from 'three'
import { loadImage } from '../utils'
// 地图模型-地形贴图
export const map0 = new THREE.TextureLoader().load('static/obj/greenhouseW.png')
export const ObjMaterial07 = new THREE.MeshBasicMaterial({
  map: map0,
  side: THREE.DoubleSide,
  transparent: true,
  opacity: 1
})
export const map1 = new THREE.TextureLoader().load('static/obj/greenhouse.png')
export const ObjMaterial = new THREE.MeshBasicMaterial({
  map: map1,
  side: THREE.DoubleSide,
  transparent: true,
  // blending: THREE.AdditiveBlending,
  opacity: 0.4
})
// 地板材质
// 地板的材质1
export const map2 = new THREE.TextureLoader().load('static/img/ground.jpg')
map2.wrapS = THREE.RepeatWrapping
map2.wrapT = THREE.RepeatWrapping
map2.repeat.x = 5
map2.repeat.y = 15
export const planeMaterial = new THREE.MeshBasicMaterial({
  transparent: true,
  map: map2,
  // color: new THREE.Color('#394F68'),
  opacity: 1,
  side: THREE.DoubleSide
})
// 弹窗的canvas材质
const dataMap = {
  area: '面积',
  equipment: '设备',
  Yield: '产量',
  seed: '品种',
  screen: '画面',
  code: '码流',
  SoilTemperature: '土壤温度',
  SoilMoisture: '土壤湿度',
  light: '光照度',
  AirTemperature: '空气温度',
  AirMoisture: '空气湿度'
}
export async function tooltipMaterial(data, name) {
  const img = await loadImage('static/img/tooltip.png')
  const canvas = document.createElement('canvas')
  const keys = Object.keys(data)
  // console.log(keys, 'keys')
  canvas.width = 247
  canvas.height = 60 + keys.length * 60
  const titleTop = 15 + keys.length * 10
  const contentTop = 40 + keys.length * 20
  canvas.style.display = 'none'
  const { width, height } = canvas
  const ctx = canvas.getContext('2d')
  ctx.clearRect(0, 0, width, height)
  ctx.drawImage(img, 0, 0, width, height)
  ctx.fillStyle = '#fff'
  ctx.font = '550 24px Arial'
  ctx.fillText(`${name}`, 55, titleTop)
  ctx.font = '550 18px Arial'

  keys.forEach((key, idx) => {
    if (key !== 'zhanwei') {
      ctx.fillText(`${dataMap[key]}`, 55, contentTop + 40 * idx)
    }
  })
  ctx.fillStyle = '#16F7FF'
  ctx.font = 'italic 550 18px Arial'
  keys.forEach((key, idx) => {
    if (key !== 'zhanwei') {
      ctx.fillText(`${data[key]}`, 143, contentTop + 40 * idx)
    }
  })
  return new THREE.CanvasTexture(canvas)
}
function baseCircleTexture() {
  const canvas = document.createElement('canvas')
  canvas.width = 100
  canvas.height = 100
  canvas.style.display = 'none'
  const ctx = canvas.getContext('2d')

  const grad = ctx.createRadialGradient(50, 50, 0, 50, 50, 50)
  grad.addColorStop(0, 'rgba(48, 244, 266, 1)')
  grad.addColorStop(0.7, 'rgba(48, 244, 266, 1)')
  grad.addColorStop(0.71, 'rgba(48, 244, 266, 0.5)')
  grad.addColorStop(1, 'rgba(48, 244, 266, 0.5)')

  ctx.fillStyle = grad

  ctx.arc(50, 50, 50, 0, 2 * Math.PI, true)
  ctx.fill()
  return new THREE.CanvasTexture(canvas)
}
const baseCircleT = baseCircleTexture()
baseCircleT.minFilter = baseCircleT.LinearFilter
// 底座材质
export const baseCircleMaterial = new THREE.MeshBasicMaterial({
  side: THREE.DoubleSide,
  map: baseCircleT,
  transparent: true
  // depthWrite: false
})
// 圆台材质
function roundSideTexture() {
  const canvas = document.createElement('canvas')
  canvas.width = 140
  canvas.height = 140
  canvas.style.display = 'none'
  const ctx = canvas.getContext('2d')
  const { width, height } = canvas
  ctx.clearRect(0, 0, width, height)
  const grad = ctx.createLinearGradient(0, 0, 0, 140)
  /* 指定几个颜色 */
  grad.addColorStop(0, '#5feaef')
  grad.addColorStop(0.2, '#5feaef')
  grad.addColorStop(0.21, 'rgba(0, 151, 158, 1)')
  grad.addColorStop(1, 'rgba(0, 151, 158, 1)')
  /* 将这个渐变设置为fillStyle */
  ctx.fillStyle = grad
  /* 绘制矩形 */
  ctx.rect(0, 0, 140, 140)
  ctx.fill()
  return new THREE.CanvasTexture(canvas)
}
const roundSideT = roundSideTexture()
roundSideT.minFilter = roundSideT.LinearFilter
const roundTopMaterial = new THREE.MeshBasicMaterial({
  color: '#16A5AC',
  side: THREE.DoubleSide, opacity: 1,
  transparent: true
})
const roundSideMaterial = new THREE.MeshBasicMaterial({
  side: THREE.DoubleSide,
  map: roundSideT,
  transparent: true,
  opacity: 0.5
})
export const roundTableMaterialArry = [roundSideMaterial, roundTopMaterial]
const imgSrcMap = {
  'camera': 'static/img/icon-camera.png',
  'air': 'static/img/icon-air.png',
  'soil': 'static/img/icon-soil.png',
  'light': 'static/img/icon-light.png'
}
export async function showCircle(type) {
  const img = await loadImage(imgSrcMap[type])

  const canvas = document.createElement('canvas')
  canvas.width = 100
  canvas.height = 100
  canvas.style.display = 'none'
  const ctx = canvas.getContext('2d')
  const grad = ctx.createRadialGradient(50, 50, 0, 50, 50, 50)
  grad.addColorStop(0, '#10253D')
  grad.addColorStop(0.9, '#10253D')
  grad.addColorStop(0.91, '#67bfcd')
  grad.addColorStop(1, '#67bfcd')

  ctx.fillStyle = grad

  ctx.arc(50, 50, 50, 0, 2 * Math.PI, true)

  ctx.fill()
  ctx.drawImage(img, 27, 25, 50, 50)
  return new THREE.CanvasTexture(canvas)
}

